<!--
 * @Author: xiongpeiji
 * @Date: 2020-10-10 08:55:08
 * @Email: xiongpeiji@innjoy.me
 * @LastEditors: xiongpeiji
 * @LastEditTime: 2020-10-10 10:01:33
 * @Description: 支付统计分类图表组件
-->

<template>
  <div class="zichanfenleitongji">
    <div class="top-tools">
      <h3>{{text}}</h3>
      <div class="select-school">
        <span :class="{ active: dataIndex == 0 }" @click="changeIndex(0)">数量</span>
        <span class="line">|</span>
        <span :class="{ active: dataIndex == 1 }" @click="changeIndex(1)">金额</span>
        <span class="select-span">
          <el-select v-model="companyCodes" placeholder="请选择" @change="changeDataVal">
            <el-option
              v-for="item in CompanyList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </span>
      </div>
    </div>
    <div class="chart-box">
      <div id="zcfl" ></div>
    </div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
import $api from "@/axios/apiConfig"; //接口
import axios from "@/axios"; //请求
export default {
  props:{
    text:String,
    isShow:Boolean
  },
  data() {
    return {
      dataIndex: 0,
      companyCodes: "01",
      CompanyList: [], //公司下拉数据
      ChartsList: [], //图表数据
      data:[{type:'12',value:12},{type:'13',value:14},{type:'14',value:15},{type:'10',value:35}]
    };
  },
  mounted() {
    this.getCompanyList();
    this.getAssetStatPercent();
  },
  methods: {
    //获取公司列表
    getCompanyList() {
      axios
        .get($api.api + "/smart-uttc/assetManage/getCompanyList")
        .then(res => {
          if (res) {
            this.CompanyList = res.data;
          }
        });
    },
    changeIndex(index) {
      this.dataIndex = index;
      if (index == 0) {
        this.chart.changeData(this.ChartsList.countList);
      } else {
        this.chart.changeData(this.ChartsList.amountList);
      }
    },
    // 切换下拉菜单之后重新绘制图表
    changeData() {
      this.dataIndex = 0
      let url = "?companyCodes=" + this.companyCodes;
      axios
        .get($api.api + "/smart-uttc/assetManage/getAssetTypeSum" + url)
        .then(res => {
          if (res) {
            this.ChartsList = res.data;
            this.chart.changeData(this.ChartsList.countList);
          }
        });
    },
    changeDataVal(val) {
      this.companyCodes = val;
      this.changeData();
    },
    // 获取资产分类统计
    getAssetStatPercent() {
      let url = "?companyCodes=" + this.companyCodes;
      axios
        .get($api.api + "/smart-uttc/assetManage/getAssetTypeSum" + url)
        .then(res => {
          if (res) {
             let oldData = res.data;
            oldData.countList.map(item => {
              delete item.percentage;
              item.value = Number(item.value)
            });
            oldData.amountList.map(item => {
              delete item.percentage;
              item.value = Number(item.value)
            });
            this.ChartsList = oldData;
            this.chartRender();

          }
        });
    },

    chartRender() {
      const chart = new Chart({
        container: "zcfl",
        autoFit: true,
        height: 300,
        padding: [30, 10, 30, 70],// 上，右，下，左
      });
      chart.data(this.ChartsList.countList);
      chart.scale("value", {
        nice: true,
        alias:'资产数量',
        formatter:(val)=>{
          return val
        }
      });
      // chart.scale({
		  //   value: {
		  //     alias: '资产数量',
		  //   },
		  // });
      chart.axis("type", {
        line:{
            lineWidth:1,
            stroke:'#2A55FF'
        },
        label: {
          style: {
            fill: "#fff",
            fontSize: 14
          }
        }
      });
      chart.axis("value", {
        label: {
          style: {
            fill: "#FFFFFF"
          }
        }
      });
      chart.tooltip({
        showMarkers: false,
        itemTpl:'<li style="height:26px"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{type}:{value}</li>' 
      });
      chart.interaction("element-active");
      chart.legend(false);
      chart
        .interval()
        .position("type*value")
        .tooltip('type*value',function(type,value){
            return{
                type:type,
                value:value,
            }
        })
        .size(16)
        .color("#00FFEE");
      chart.render();
      this.chart = chart;
    }
  }
};
</script>

<style lang="scss" scoped>
.zichanfenleitongji {
  padding: 10px;
  .top-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      font-size: 16px;
      height: 16px;
      line-height: 16px;
      padding-left: 10px;
      border-left: 4px solid #00ffee;
    }
    .select-school {
      span {
        cursor: pointer;
        color: rgba(255, 255, 255, 0.6);
      }
      .line {
        color: #2a55ff;
        margin: 0px 10px;
      }
      .active {
        color: #00ffee;
      }
      .select-span {
        margin-left: 20px;
      }
    }
  }
  .chart-box{
    margin-top: 40px;
  }
}
</style>